<template>
  <div v-show="isShow" class="sidebar-container">
    <li v-for="(item, index) in menu" :key="index" :style="`--t: ${item.top}%`">
      <a
        :style="`--color: ${
          activeValue === item.routeName.name_1 ||
          activeValue === item.routeName.name_2
            ? '#006863'
            : '#fff'
        }`"
        @click.prevent="handleJump(item.routeInfo)"
      >
        <font-awesome-icon :icon="item.icon" />
      </a>
    </li>

    <div class="top" />
    <div class="middle" />
    <div class="bottom" />
  </div>
</template>

<script>
import useStore from '@/store'
export default {
  name: 'Sidebar',
  data() {
    return {
      activeValue: '',
      menu: [
        {
          top: 20,
          icon: ['fas', 'wind'],
          routeInfo: {
            name: 'home-wea'
          },
          routeName: {
            name_1: 'home-wea',
            name_2: 'home-rad'
          }
        },
        {
          top: 30,
          icon: ['fas', 'bolt'],
          routeInfo: {
            name: 'global'
          },
          routeName: {
            name_1: 'global'
          }
        },
        {
          top: 40,
          icon: ['fass', 'sun'],
          routeInfo: {
            name: 'sun'
          },
          routeName: {
            name_1: 'sun'
          }
        },
        {
          top: 50,
          icon: ['fasl', 'temperature-full'],
          routeInfo: {
            name: 'temperature'
          },
          routeName: {
            name_1: 'temperature'
          }
        },
        {
          top: 60,
          icon: ['fass', 'tornado'],
          routeInfo: {
            name: 'db-scroll'
          },
          routeName: {
            name_1: 'db-scroll',
            name_2: 'db-time'
          }
        },
        {
          top: 70,
          icon: ['fas', 'cloud'],
          routeInfo: {
            name: 'capsule'
          },
          routeName: {
            name_1: 'capsule'
          }
        }
      ]
    }
  },
  computed: {
    isShow() {
      return useStore().isChecked
    }
  },
  mounted() {
    this.$router.onReady(() => {
      this.activeValue = this.$route.name
    })

    this.$bus.$on('changeLogoColor', this.handleJump)
  },
  beforeDestroy() {
    this.$bus.$off('changeLogoColor')
  },
  methods: {
    handleJump(info) {
      this.activeValue = info.name
      this.$router.push(info)
    }
  }
}
</script>
<style lang="scss" scoped>
.sidebar-container {
  /* 绝对固定定位 */
  position: fixed;

  /* 垂直居中 */
  top: 50%;
  right: 0;
  z-index: 9999;
  width: 15px;
  height: 600px;
  overflow: hidden;
  background-color: #222;

  /* 右上右下圆角 */
  border-radius: 0 15px 15px 0;

  /* 动画过渡 */
  transition: 0.3s;
  transform: translateY(-50%);

  &:hover {
    /* 鼠标移入，展开+改变圆角大小 */
    width: 130px;
    border-radius: 0 30px 30px 0;

    li a {
      color: var(--color);
      transition: color 0.3s ease;
    }
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 50%;
    height: 100%;
    content: '';
    background-color: lightseagreen;
  }

  .top {
    width: calc(100% - 30px);
    height: 20%;
    margin-left: 30px;
    background-color: #222;
    border-radius: 0 0 0 20px;

    /* 动画过渡 */
    transition: 0.2s;
  }

  .middle {
    width: calc(100% - 60px);
    height: 10%;
    margin-left: 40px;
    background-color: lightseagreen;
    border-radius: 20px;
  }

  .bottom {
    width: calc(100% - 30px);
    height: 100%;
    margin-left: 30px;
    background-color: #222;
    border-radius: 20px 0 0;
  }

  li {
    /* 绝对定位 */
    position: absolute;

    /* 通过var函数调用自定义属性--t */
    top: var(--t);

    /* 弹性布局 水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10%;
    font-size: 30px;
    cursor: pointer;

    a {
      /* 字体颜色透明 */
      color: transparent;

      /* 动画过渡 */
      transition: 0.3s;
    }

    &:nth-child(1):hover ~ .top {
      height: 20%;
    }

    &:nth-child(2):hover ~ .top {
      height: 30%;
    }

    &:nth-child(3):hover ~ .top {
      height: 40%;
    }

    &:nth-child(4):hover ~ .top {
      height: 50%;
    }

    &:nth-child(5):hover ~ .top {
      height: 60%;
    }

    &:nth-child(6):hover ~ .top {
      height: 70%;
    }
  }
}
</style>
